<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影院管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影院列表</el-breadcrumb-item>
         <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
         <el-breadcrumb-item>配置座位模板</el-breadcrumb-item>
         </el-breadcrumb>
     <el-divider></el-divider>
     <!-- 配置座位模板内容 -->
     <el-container>
        <el-aside>
           <el-timeline>
            <!-- 第一步 -->
             <el-timeline-item>
                <el-card class="box-card">
                 <div slot="header" class="clearfix">
                  <span>座位生成</span>
                  </div>
                  <div>
                    <el-form label-width="60px">
                       <el-form-item label="行数">
                       <el-input v-model="rows" placeholder="请输入行数" size="small"></el-input>
                       </el-form-item>
                       <el-form-item label="列数">
                       <el-input v-model="cols" placeholder="请输入列数" size="small"></el-input>
                       </el-form-item>
                       </el-form>
                       <el-button type="primary" plain style="width:100%;" size="small" @click="step1">确认生成座位模板</el-button>
                  </div>
               </el-card>
             </el-timeline-item>
             <!-- 第二步 -->
             <el-timeline-item>
                <el-card class="box-card">
                 <div slot="header" class="clearfix">
                  <span>选择座位区域(框选)</span>
                  </div>
                  <div>
                 <el-button type="primary" plain style="width:100%;" size="small" @click="step2">撤销选中</el-button>
                  </div>
               </el-card>
             </el-timeline-item>
             <!-- 第三步 -->
             <el-timeline-item>
                <el-card class="box-card">
                 <div slot="header" class="clearfix">
                  <span>选择座位类型</span>
                  </div>
                  <div>
                 <el-button type="primary" plain style="width:100%;" size="small" @click="step3_1">普通座位</el-button>
                 <br><br>
                 <el-button type="primary" plain style="width:100%;" size="small" @click="step3_2">过道</el-button>
                  </div>
               </el-card>
             </el-timeline-item>
             <!-- 第四步 -->
              <el-timeline-item>
                <el-card class="box-card">
                 <div slot="header" class="clearfix">
                  <span>确认模板</span>
                  </div>
                  <div>
                 <el-button type="success" plain style="width:100%;" size="small" @click="step4">点击确认</el-button>
                  </div>
               </el-card>
             </el-timeline-item>
           </el-timeline>
        </el-aside>
        <el-main>
            <!-- 提示 -->
            <div style="text-align:center;">
              <div style="display:inline-block;background:#36D6;width:20px;height:20px;vertical-align:middle;"></div>未选择座位
              &nbsp;&nbsp;
              <div style="display:inline-block;background:#36D;width:20px;height:20px;vertical-align:middle;"></div>已选择座位
              &nbsp;&nbsp;
              <div style="display:inline-block;background:#a11;width:20px;height:20px;vertical-align:middle;"></div>普通座位
              &nbsp;&nbsp;
              <div style="display:inline-block;background:#3333;width:20px;height:20px;vertical-align:middle;"></div>过道
            </div>
            <br>
            <el-divider></el-divider>
            <el-divider>电影荧屏</el-divider>
            <canvas id="canvas"></canvas>
        </el-main>
     </el-container>
    </div>
</template>

<script>
import SeatSelector from '@/libs/SeatSelector.js'
    export default {
        data() {
            return {
                rows: 0,
                cols:0,
                seatSelector:null,
                id:this.$route.params.id
            }
        },
        methods: {
            /**
             * 生成座位模板，并且绘制在canvas中
             */
            step1() {
                this.seatSelector = new SeatSelector(Number(this.rows),Number(this.cols),'canvas')
                this.seatSelector.draw()//绘制canvas
           },
           step2(){
            if(this.seatSelector){
              this.seatSelector.setNoseat()        
            }
           },
           //设置为普通座位
        step3_1(){
         if(this.seatSelector){
              this.seatSelector.setputong()        
            }
           },
            //设置为过道
        step3_2(){
         if(this.seatSelector){
              this.seatSelector.setguodao()        
            }
           },
           //获取座位字符串
           step4(){
            if(this.seatSelector){
                try {
                let seat_template = this.seatSelector.getSeaTemplateString()
                let room_size = this.seatSelector. getseatCount()
                this.$http.cinemaRoomApi.isnertRoom({seat_template:seat_template,room_size:room_size,id:this.id}).then(res =>{
                    console.log(res)
                    if(res.data.code ==200 ){
                      this.$message.success('更新成功')
                      this.$router.go(-1)
                    }
                })
                } catch (error){
                  this.$message.error(error)
                }
            }
           }
        },
    }
</script>

<style lang="less" scoped>
   #canvas{
    border: 1px dashed #999;
    border-radius: 4px;
    display: none;
    margin: 0 auto;
   }
</style>